<template>
  <div class="tutorial">
    <!-- 页头 -->
    <PageHeader :lang="lang"></PageHeader>

    <!-- banner -->
    <section class="banner">
      <img src="./images/down-bg.png" />
      <div class="text">
        <h1>IDCM下载教程</h1>
        <p>如果没有美国/ 香港Apple ID 是无法在美国/ 香港 App Store 下载App，以下提供两种方法获取美国/ 香港Apple ID</p>
      </div>
    </section>

    <!-- 方式一 -->
    <section class="style">
      <h1>方式 01</h1>
      <p>1. 通过淘宝，搜索关键字“苹果 美国/ 香港 ID”可选择中意商铺直接购买一个。购买成功后按照以下步骤进行操作下载IDCM App。</p>
      <img src="./images/tutorial01.png" />
      <p>2. 点击App Store进入后，在Today页面右上角点击用户中心图标。</p>
      <img src="./images/tutorial02.png" />
      <p>3. 进入用户中心后，点击退出登录，退出后填写购买来的美国/香港Apple ID （建议复制)与密码，输入完成后登录。</p>
      <img src="./images/tutorial03.png" />
      <p>4. 登录成功后，搜索“IDCM”(大小写均可)便可搜索到IDCM App。点击取得便可直接下载IDCM App。</p>
      <img src="./images/tutorial04.png" />
      <div class="tips">
        <h3>美国/ 香港苹果ID试用账号：</h3>
        <ul>
          <li>1.账号：n89c1x8@icloud.com</li>
          <li>2.账号：jk7wk75@icloud.com  美国</li>
          <li>3.账号：sm8dm4a@icloud.com  美国 </li>
          <li>4.账号：i9k37yw@icloud.com  香港</li>
          <li>5.账号：mli2iog@icloud.com  香港</li>
          <li>6.账号：b7r48m1@icloud.com  香港</li>
        </ul>
        <h4>密码统一为：Idcm1234</h4>
      </div>
    </section>

    <!-- 方式二 -->
    <section class="style two">
      <h1>方式 02</h1>
      <p>1. 打开App Store，点击进入后，在Today右侧点击用户图标。</p>
      <img src="./images/tutorial05.png" />
      <p>2. 进入App Store界面之后，退出账号，点击创建新Apple ID 地区选择美国/ 香港，邮箱可以使用QQ邮箱，有时候163会收不到。</p>
      <img src="./images/tutorial06.png" />
      <p>3. 填写资料，安全提示问题，以及填写付款方式，需要有美国/ 香港电话或者信用卡/借记卡，就可以完成创建。</p>
      <img src="./images/tutorial07.png" />
      <p>4. 注册完成后，登录成功会直接跳转至美国/ 香港地区的商店，直接搜索IDCM App可以直接下载。</p>
      <img src="./images/tutorial08.png" />
    </section>
    <!-- 页脚 -->
    <PageFooter2 :lang="lang" :langKey="langKey"></PageFooter2>
  </div>
</template>

<script>
import commonMixins from '@/mixins/common.js'

export default {
  mixins: [commonMixins],
  data () {
    return {

    }
  },
  components: {

  },
}
</script>
<style lang="less">
.tutorial  {
  .banner {
    position: relative;
    color: #fff;

    img {
      width: 100%;
    }
    .text {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;

      h1 {
        font-size: 42px;
      }
      p {
        font-size: 14px;
        margin-top: 36px;
      }
    }
  }

  /*== 方式一，二 ==*/
  .style {
    width: 1000px;
    margin: 0 auto;
    color: #fff;
    text-align: center;

    h1 {
      font-size: 72px;
      color: #536B92;
      margin: 50px 0;
      font-weight: bold;
      position: relative;

      &:before {
        content: '';
        position: absolute;
        top: 50%;
        left: 0;
        width: 260px;
        height: 2px;
        background: linear-gradient(90deg, rgba(117, 161, 255, 0.1), rgba(117, 161, 255, 0.8))
      }
      &:after {
        content: '';
        position: absolute;
        top: 50%;
        right: 0;
        width: 260px;
        height: 2px;
        background: linear-gradient(90deg, rgba(117, 161, 255, 0.8), rgba(117, 161, 255, 0.1))
      }
    }

    p {
      margin: 70px 0 30px 0;
    }

    .tips {
      width: 600px;
      margin: 40px auto 70px auto;
      background-color: #272e3d;
      border-radius: 20px;
      border: 1px solid #536B92;
      padding: 20px 30px;
      box-sizing: border-box;

      h3 {
        color: #72CDFF;
        margin-bottom: 20px;
      }
      h4 {
        margin-top: 20px;
      }
      ul {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;

        li {
          width: 50%;
          text-align: left;
          height: 26px;
          line-height: 26px;

          &:nth-child(2n) {
            text-indent: 22px;
          }
        }
      }
    }
  }
  .two {
    margin-bottom: 80px;
  }
}

@media only screen and (max-width: 1200px) {
  .tutorial {
    .style {
      width: 740px;

      h1 {
        &:before {
          width: 200px;
        }
        &:after {
          width: 200px;
        }
      }
    }
  }
}
</style>
